<template>
  <div id="Space">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <!-- 中部菜单 -->
    <div class="MidMenu">
      <MidMenu></MidMenu>
    </div>
    <!-- 页脚 -->
    <div class="Footer">
      <Footer></Footer>
    </div>
    <!--模块幻灯片 -->
    <div class="slide" v-show="1">
      <el-carousel :interval="4000" type="card" height="350px">
        <el-carousel-item v-for="(item,i) in slideData" :key="i" title="点击前往">
          <router-link :to="item.link" class="slideItem">
            <div>
              <img :src="item.image?item.image:'http://codeworld.fun/res/icons/CodeWorld.ico'" alt="img">
            </div>
            <div style="margin-left: 2%;">
              <h3 style="color: dodgerblue;">{{ item.title }}</h3>
              <p style="color: darkcyan">{{ item.blurb }}</p>
              <p style="color: darkcyan">更新时间：{{ item.time }}</p>
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../components/head/LeftMenu'
import TopNav from '../../components/head/TopNav'
import MidMenu from "../../components/head/MidMenu";
import Footer from '../../components/foot/Footer'
import CodeWeb from "../../assets/js/CodeWeb";

export default {
  name: 'Field',
  components: {LeftMenu, TopNav, MidMenu, Footer},

  data() {
    return {
      searchTip: '站内搜索',
      inputValue: '',
      slideData: [
        {
          link: "/space/webSave",
          image: "",
          title: "导航模块",
          blurb: "导航模块：基本建设完成，持续更新中！",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
        {
          link: "/space/",
          image: "",
          title: "发布模块",
          blurb: "发布模块：待建设",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
        /*{link: "/", image: "", title: "创作板块", blurb: "创作板块：建设中......"},*/
        {
          link: "/space/blog",
          image: "",
          title: "博客模块",
          blurb: "博客模块：基本建设完成，持续更新中！",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
      ],
    }
  },
  created() {
  },
  methods: {},
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#Space {
  background: url("src/assets/image/starHill.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
}

.TopNav {
}

.MidMenu {
}

/*模块幻灯片*/
.slide {
  position: absolute;
  width: 60%;
  height: 40%;
  margin-top: 20%;
  margin-left: 20%;
}

el-carousel {
  opacity: 0.9;
}

.slideItem {
  height: 90%;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  display: flex;
}

.slideItem:hover {
  font-size: 15px;

}

.slideItem img {
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

.slideItem img:hover {
  width: 215px;
  height: 215px;
}

.slideItem:nth-child(2n) {
  background-color: aliceblue;
}

.slideItem:nth-child(2n+1) {
  background-color: azure;
}

/*模块幻灯片end*/

</style>
